<template>
  <div class="home" ref="content">
    <div class="banner">
      <h3>长城旅行</h3>
    </div>

    <div class="imgShow">
      <img src="@/assets/img/home/banner.webp" alt="">
    </div>

    <HomeBody></HomeBody>
    <HomeContent></HomeContent>
   <van-back-top  v-if="show" right="30" bottom="70"></van-back-top>

  </div>
</template>

<script setup>
  import HomeBody from './kids/HomeBody.vue';
  import HomeContent from './kids/HomeContent.vue';
  import { ref,onMounted,onActivated } from 'vue';  
  import useHomeStore from '@/stores/modules/home';

  const homeStore = useHomeStore()
  homeStore.getHotRoom()
  
  const show = ref(false)
  const content = ref()

  let next = true
  let scrollTop 
  function scroolEvent(){
      if (!next) return
      let scrollHeight = this.scrollHeight
      let clientHeight =  this.clientHeight
      scrollTop = this.scrollTop
      if (clientHeight + scrollTop >= scrollHeight) {
          next =false
          homeStore.getHotRoom()
          setTimeout(()=>{next = true},300)
      }
      if (scrollTop >clientHeight+200 ){
          show.value = true
      }
      else show.value =false
  }

  onMounted(() => {
      content.value.addEventListener("scroll",scroolEvent) 
  })

  onActivated(() => {
    content.value.scrollTo({top:scrollTop})
  })
  
</script>

<style lang="less" scoped>
  .home {
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
  }
  .banner {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #f3f3f3;
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .imgShow {
    img {
      width: 100%;
    }
  }
</style>